<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>地理编码(地址->经纬度)</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
      }
      .btn {
        width: 10rem;
        margin-left: 6.8rem;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div class="input-card" style="width: 28rem">
      <label style="color: grey">地理编码，根据地址获取经纬度坐标</label>
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text">地址</span>
        </div>
        <input id="address" type="text" value="北京市朝阳区阜荣街10号" />
      </div>
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text">经纬度</span>
        </div>
        <input id="lnglat" disabled type="text" />
      </div>
      <input id="geo" type="button" class="btn" value="地址 -> 经纬度" />
    </div>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        serviceHost: 'http://www.jsapi.com/_AMapService',
      }
      window._AMapSecurityConfig = {
        serviceHost: '/_AMapService',
        // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
      }
    </script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=3e408400727ffaf931105d40abe6a042&plugin=AMap.Geocoder"
    ></script>

    <script type="text/javascript">
      var map = new AMap.Map('container', {
        resizeEnable: true,
      })

      var geocoder = new AMap.Geocoder({
        city: '0371', //城市设为北京，默认：“全国”
      })

      var marker = new AMap.Marker()

      function geoCode() {
        var address = document.getElementById('address').value
        console.log(address)
        geocoder.getLocation(address, function (status, result) {
          console.log(status, result)
          if (status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location
            document.getElementById('lnglat').value = lnglat
            marker.setPosition(lnglat)
            map.add(marker)
            map.setFitView(marker)
          } else {
            log.error('根据地址查询位置失败')
          }
        })
      }
      document.getElementById('geo').onclick = geoCode
      document.getElementById('address').onkeydown = function (e) {
        if (e.keyCode === 13) {
          geoCode()
          return false
        }
        return true
      }
    </script>
  </body>
</html>
